<template>
  <div v-if="query.activitiesId === ''">
    <div class="my-code">点击上方“校庆活动”了解详情</div>
  </div>
  <!--工具栏-->
  <div v-else>
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template slot="title">
          活动详情<i class="header-icon el-icon-info" />
        </template>
        <el-row :gutter="0.5" type="flex" justify="start">
          <el-col :span="1.5">
            <div class="grid-content bg-purple" style="text-align: right;">活动名称：</div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple" style="text-align: left;">{{ temp.name }}</div>
          </el-col>
          <el-col :span="1.5">
            <div class="grid-content bg-purple" style="text-align: right;">发布时间：</div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple" style="text-align: left;">{{ parseTime(temp.createTime) }}</div>
          </el-col>
        </el-row>
        <el-row :gutter="0.5" type="flex" justify="start">
          <el-col :span="1.5">
            <div class="grid-content bg-purple" style="text-align: right;">开始时间：</div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple" style="text-align: left;">{{ parseTime(temp.startTime) }}</div>
          </el-col>
          <el-col :span="1.5">
            <div class="grid-content bg-purple" style="text-align: right;">结束时间：</div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple" style="text-align: left;">{{ parseTime(temp.endTime) }}</div>
          </el-col>
          <el-col :span="1.5">
            <div class="grid-content bg-purple" style="text-align: right;">预约开始时间：</div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple" style="text-align: left;">{{ parseTime(temp.appStartTime) }}</div>
          </el-col>
          <el-col :span="1.5">
            <div class="grid-content bg-purple" style="text-align: right;">预约结束时间：</div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple" style="text-align: left;">{{ parseTime(temp.appEndTime) }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="start">
          <el-col :span="1.5">
            <div class="grid-content bg-purple" style="text-align: right;">活动内容：</div>
          </el-col>
          <el-col :span="22.5">
            <div class="grid-content bg-purple" style="text-align: left;">{{ temp.content }}</div>
          </el-col>
        </el-row>
      </el-collapse-item>

      <el-collapse-item title="预约人员名单" name="2">
        <div>
          <!-- 搜索 -->
          <label class="el-form-item-label" style="padding-left: 65px">姓名</label>
          <el-input
            v-model="query.name"
            clearable
            placeholder="姓名"
            style="width: 150px;"
            class="filter-item"
            @keyup.enter.native="crud.toQuery"
          />
          <label class="el-form-item-label" style="padding-left: 37px">预约人员类型</label>
          <el-select
            v-model="query.type"
            clearable
            size="small"
            placeholder="类型"
            class="filter-item"
            style="width: 130px"
            @change="crud.toQuery"
          >
            <el-option v-for="item in dict.user_type" :key="item.id" :label="item.label" :value="item.value" />
          </el-select>
          <rrOperation :crud="crud" />
        </div>
        <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
        <crudOperation :permission="permission" />

        <!--表单组件-->
        <el-dialog
          v-if="crud.status.cu"
          :close-on-click-modal="false"
          :before-close="crud.cancelCU"
          :visible.sync="crud.status.cu > 0"
          :title="crud.status.title"
          width="950px"
        >
          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
            <selectUser ref="selectUser" :activities-id="form.activitiesId" :permission="permission" />
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="crud.cancelCU(); crud.refresh()">关闭</el-button>
          </div>
        </el-dialog>
        <!--表格渲染-->
        <!-- <span>查询的id:{{query.activitiesId}}</span>-->
        <el-table
          ref="table"
          v-loading="crud.loading"
          :data="crud.data"
          size="small"
          style="width: 100%;"
          @selection-change="crud.selectionChangeHandler"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="姓名" sortable />
          <el-table-column prop="type" label="预约人员类型" sortable>
            <template slot-scope="scope">
              {{ dict.label.user_type[scope.row.type] }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="预约时间" width="135">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isEnable" label="确认参会" fixed="right" width="80">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isEnable" active-color="#409EFF" inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.isEnable)" />
            </template>
          </el-table-column>
          <el-table-column v-permission="['admin','appUserInfo:del']" label="操作" width="60px" align="center" fixed="right">
            <template slot-scope="scope">
              <delOperation :data="scope.row" :permission="permission" />
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import crudAppUserInfo from '@/api/anniversary/appUserInfo'
import CRUD, {
  presenter,
  header,
  form,
  crud
} from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import delOperation from '@crud/DEL.operation'
import selectUser from './selectUser'
const defaultForm = {
  id: null,
  name: null,
  activitiesId: null,
  userId: null,
  type: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  sort: null,
  remark: null,
  isEnable: true
}
export default {
  name: 'AppUserInfo',
  components: {
    crudOperation,
    pagination,
    rrOperation,
    delOperation,
    selectUser
  },
  mixins: [presenter(), header(), form(function() {
    return Object.assign({
      appUserInfo: {
        id: this.activitiesId
      }
    }, defaultForm)
  }), crud()],
  dicts: ['user_type', 'data_status'],
  cruds() {
    return CRUD({
      title: '预约人员',
      url: 'api/appUserInfo',
      sort: 'id,desc',
      query: {
        activitiesId: ''
      },
      crudMethod: { ...crudAppUserInfo
      },
      queryOnPresenterCreated: false
    })
  },
  data() {
    return {
      activeNames: ['1'],
      activitiesId: null,
      permission: {
        add: ['admin', 'appUserInfo:add'],
        del: ['admin', 'appUserInfo:del']
      },
      rules: {}
    }
  },
  created() {
    this.crud.optShow.edit = false
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      // 预设不需要输入的值
      defaultForm.activitiesId = this.activitiesId
      return true
    },
    // 改变状态
    changeEnabled(data, val) {
      this.$confirm('此操作将 "' + this.dict.label.data_status[val] + '" ' + data.name + ', 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crudAppUserInfo.edit(data).then(res => {
          this.crud.notify(this.dict.label.data_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        }).catch(() => {
          data.isEnable = !data.isEnable
        })
      }).catch(() => {
        data.isEnable = !data.isEnable
      })
    }
  }
}
</script>

<style scoped>

</style>
